<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<anchored-heading :level="5">Hello world!</anchored-heading>
		<!-- render  -->
		<anchored-heading-b :level="4">Hello world Render 方式!</anchored-heading-b>
		<!-- render箭头函数 -->
		<anchored-heading-c :level="3">Hello world Render 箭头函数!</anchored-heading-c>
	</div>

</body>
<!-- 这个是什么意思 模板 -->
<script type="text/x-template" id="anchored-heading-template">
	  <h1 v-if="level === 1">
	    <slot></slot>
	  </h1>
	  <h2 v-else-if="level === 2">
	    <slot></slot>
	  </h2>
	  <h3 v-else-if="level === 3">
	    <slot></slot>
	  </h3>
	  <h4 v-else-if="level === 4">
	    <slot></slot>
	  </h4>
	  <h5 v-else-if="level === 5">
	    <slot></slot>
	  </h5>
	  <h6 v-else-if="level === 6">
	    <slot></slot>
	  </h6>
</script>

<script type="text/javascript">

	Vue.component('anchored-heading', {
	  template: '#anchored-heading-template',
	  props: {
	    level: {
	      type: Number,
	      required: true
	    }
	  }
	})

	Vue.component('anchored-heading-b', {
	  //下面 render 函数
	  render: function (createElement) {
	  	//  https://cn.vuejs.org/v2/api/#vm-slots  
	    return createElement(
	      'h' + this.level,   // 标签名称
	      this.$slots.default // 子节点数组，default property 包括了所有没有被包含在具名插槽中的节点，或 v-slot:default 的内容。
	    )
	  },
	  props: {
	    level: {
	      type: Number,
	      required: true
	    }
	  }
	})

	Vue.component('anchored-heading-c', {
	  // 箭头函数的写法
	  render: h =>{
	  	return h(
	      'h' + this.level,   // 标签名称
	      this.$slots.default
	  	)
	  },
	  props: {
	    level: {
	      type: Number,
	      required: true
	    }
	  }
	})
	new Vue({
		el:'#app',
	})
</script>
</html>